<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>登录-病理图像病灶自动分割系统</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
    <style>
        .layui-div1 input {
            width: 165px;
            height: 34px;
            line-height: 34px;
            border: 1px solid #ddd;
            font-size: 14px;
            padding-left: 0;
            margin-left: 0;
        }

        /*登录页面*/
        .logibBg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .layui-loginBody {
            position: fixed;
            right: 50%;
            bottom: 50%;
            transform: translateX(50%) translateY(40%);
        }

        .layui-loginTitle {
            letter-spacing: 5px;
            margin-bottom: 30px;
            font-family: "微软雅黑";
            font-size: 38px;
            color: #FFFFFF;
            text-align: center;
            font-weight: bold;
        }

        .layui-loginMin {
            background: #fff;
            border-radius: 10px;
            padding: 45px 45px 45px 25px;
            overflow: hidden;
            display: inline-block;
        }

        .layui-leftMag img {
            width: 300px;
        }

        .layui-leftMag, .layui-rightBody {
            float: left;
        }

        .layui-rightBody {
            width: 245px;
        }

        .layui-rightBody h1 {
            text-align: left;
            font-size: 20px;
            color: #1dacef;
        }

        .layui-rightBody h1 img {
            width: 22px;
        }

        .layui-div {
            position: relative;
            margin: 15px 0;
        }

        .layui-div img {
            position: absolute;
            left: 5px;
            top: 8px;
            width: 20px;
        }

        .layui-div input {
            width: 215px;
            height: 34px;
            line-height: 34px;
            border: 1px solid #ddd;
            font-size: 14px;
            padding-left: 30px;
        }

        .layui-rightBody button {
            width: 100%;
            margin-top: 10px
        }

        input::-webkit-input-placeholder {
            /* placeholder颜色  */
            color: #8e8c8c;
            /* placeholder字体大小  */
            font-size: 14px;

        }
    </style>
<body>
<div>
    <img alt="" src="{{ url_for('static',filename='img/background.jpeg') }}" class="logibBg">
    <div class="layui-loginBody">
        <div class="layui-loginTitle">
            病理图像病灶自动分割系统
        </div>
        <div class="layui-loginMin">
            <div class="layui-leftMag">
                <img src="{{ url_for('static',filename='img/leftBg.png') }}" alt="">
            </div>
            <div class="layui-rightBody">
                <form id="form_login" action="javascript:void(0)">
                    <h1>
                        <img src="{{ url_for('static',filename='img/welcome.png') }}" alt="" style="margin-bottom: 3px">
                        您好，欢迎您登录
                    </h1>
                    <div class="layui-div">
                        <img src="{{ url_for('static',filename='img/account.png') }}" alt="">
                        <input type="text" id="username" name="username" placeholder="请输入用户名" lay-verify="username">
                    </div>
                    <div class="layui-div">
                        <img src="{{ url_for('static',filename='img/password.png') }}" alt="">
                        <input type="password" id="password" name="password" placeholder="请输入密码" lay-verify="password">
                    </div>
                    <button type="button" id="btn_login"
                            class="layui-btn layui-btn-radius layui-btn-sm layui-btn-normal">立即登录
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script>
    layui.use(['layer', 'form'], function () {
        let layer = layui.layer
            , $ = layui.jquery
            , form = layui.form;
        form.verify({
            username: function (value, item) {
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '账号或密码格式不正确!';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '账号或密码格式不正确!';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '账号或密码格式不正确!';
                }
                if (!/^[\S]{4,12}$/.test(value)) {
                    return '账号或密码格式不正确!';
                }
            },
            password: [/^[\S]{4,12}$/, '账号或密码格式不正确!']
        })
        let index;
        $("#btn_login").click(function () {
            $.ajax({
                type: 'POST',
                url: '/user/login',
                data: {
                    username: $('#username').val(),
                    password: $('#password').val()
                },
                beforeSend: function () {
                    if (form.validate('#username,#password')) {
                        index = layer.load(1)
                    } else {
                        return false
                    }
                },
                success: function (res) {
                    if (res.success) {
                        location.href = '/user/home'
                    } else {
                        layer.alert(res.msg)
                    }
                },
                dataType: 'json',
                error: function (xhr, status, err) {
                    layer.alert("系统错误，请重试");
                },
                complete: function () {
                    layer.close(index)
                }
            });
        })
    })
</script>
</body>
</html>